<template>
    <div class="breakBrickContent">
        <div class="btnBox">
            <van-button
                style="width: 100%;background: #9f3124;color: #FFF;border-radius: 16px;border: none; transition: all 0.3s ease;margin: 0 10px;"
                @click="stop"
            >停止
            </van-button>
            <van-button
                style="width: 100%;background: #15256a;color: #FFF;border-radius: 16px;border: none; transition: all 0.3s ease;margin: 0 10px;"
                @click="start"
            >游戏开始
            </van-button>
        </div>
        <div class="score">score:{{scroce}}</div>
        <div class="box" :style="{width :boxWidth +'px', height:boxHeight +'px'}">
            <div class="str">{{str}}</div>
            <div class="kuaiBox">
                <div class="kuai" v-for="(item,index) in arr" :key="index" :style="{opacity :item.active ? '0':'1'}"></div>
            </div>
            <div class="ball" :style="{left :x + 'px', top : y + 'px', width : ball +'px', height: ball+'px'}"></div>
            <div class="bottomMove"
                :style="{left :mx + 'px' , top : my + 'px',width :moveBottomW +'px',height : moveBottomH+'px'  }"></div>
        </div>
    </div>
</template>
    
<script setup lang="ts">
import { ref, onMounted, computed, onUnmounted, reactive, toRefs } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast, showFailToast, showDialog } from 'vant'


const route = useRoute()
const router = useRouter()

const dialogShow = ref<boolean>(true);


const boxWidth = window.innerWidth - 10 // 场景宽度
const boxHeight = window.innerHeight - 160 // 场景高度
const ball = 10 //小球的宽高
const moveBottomH = 20 //移动方块高度
const moveBottomW = 100 //移动方块快读

const strArr = '恭喜你,挑战成功!!'

//用reactive 保存一些可观察信息
const state = reactive({
    x: boxWidth / 2 - ball / 2,  // 小球x轴位置信息 计算默认位置在中间
    y: boxHeight - ball - moveBottomH, // 小球Y轴的位置信息 计算默认位置在中间
    mx: boxWidth / 2 - moveBottomW / 2, //移动方块的位置信息 计算默认位置在中间
    my: boxHeight - moveBottomH, // 移动方块y轴的的位置信息  计算默认位置在中间
    // 被打击方块的数组
    arr: Array.from({length: 50}, (_, index) => {
        return {
            index,
            active: false
        }
    }),
    str: '', // 返回挑战成功字眼
    scroce: 0 // 分数
})
// 用toRefs将观察对象的信息解构出来供模板使用 
const {x, y, mx, my, arr, str, scroce} = toRefs(state)
const timer = ref<any>(null) // 小球定时器
let speed = 8 // 小球速度
let map = {x: 10, y: 10}
const timer2 = ref<any>(null) // 挑战成功字眼显示定时器
let index = 0 //挑战成功字眼续个显示的索引值

// 挑战成功字眼续个显示的方法
const strFun = () => {
    if (strArr.length === index) clearInterval(timer2.value)
    state.str += strArr.substr(index, 1)
    index++
}

//移动小球的方法  
// 1.这里同过变量map 对象来记录坐标信息, 确定小球碰到 左右上 及移动方块是否回弹
// 2.循环砖块检测小球碰撞到砖块消失
const moveBall = () => {
    const {offsetTop, offsetHeight, offsetLeft, offsetWidth} = document.querySelector('.bottomMove') as any
    if (state.x <= 0) {
        map.x = speed
    } else if (state.x > boxWidth - ball) {
        map.x = -speed
    }
    if (state.y <= 0) {
        map.y = speed
    }
    if (state.y >= offsetTop - offsetHeight &&
        state.y <= offsetTop + offsetHeight &&
        state.x >= offsetLeft &&
        state.x < offsetLeft + offsetWidth) {
        map.y = -speed
    }
    if (state.y > boxHeight) {
        clearInterval(timer.value)
        showDialog({
            title: 'game over',
            message: '游戏结束了!',
        }).then(() => {
            // on close
            window.location.reload()
        });
    }
    Array.from(state.arr).forEach((item, index) => {
        const {
            offsetLeft,
            offsetTop,
            offsetWidth,
            offsetHeight
        } = document.querySelectorAll('.kuai')[index] as any
        if (state.x > offsetLeft
            && state.x < offsetLeft + offsetWidth
            && state.y > offsetTop
            && state.y < offsetTop + offsetHeight) {
            if (!state.arr[index].active) {
                state.scroce += 100
            }
            state.arr[index].active = true
        }
    })
    if (Array.from(state.arr).every(item => item.active)) {
        clearInterval(timer.value)
        timer2.value = setInterval(strFun, 1000)
    }
    state.x = state.x += map.x
    state.y = state.y += map.y
}

//移动方块左右移动方法 ,接住小球
const bottomMove = ev => {
    // 监听键盘事件 空格暂停游戏 箭头左右移动移动方块
    if (ev.code === 'Space') clearInterval(timer.value)
    switch (ev.key) {
        case 'ArrowRight':
            state.mx += 100
            break
        case  'ArrowLeft':
            state.mx -= 100
            break
    }
    state.mx = state.mx < 0 ? 0 : state.mx
    state.mx = state.mx > boxWidth - moveBottomW ? boxWidth - moveBottomW : state.mx
}
// 暂停游戏
const stop = () => {
    clearInterval(timer.value)
    document.removeEventListener('touchstart', handleTouchStart)
    document.removeEventListener('touchmove', handleTouchMove)
}

// 开始游戏 
const start = () => {
    timer.value = setInterval(moveBall, 20)
    document.addEventListener('touchstart', handleTouchStart)
    document.addEventListener('touchmove', handleTouchMove)
}

const handleTouchStart = (e) => {
    state.mx = e.touches[0].clientX - 40 // 减去40是为了让移动方块的中心点和手指的中心点对齐 值为球拍一半宽度
    state.mx = state.mx < 0 ? 0 : state.mx - 40
    state.mx = state.mx > boxWidth - moveBottomW ? boxWidth - moveBottomW : state.mx
}

const handleTouchMove = (e) => {
    state.mx = e.touches[0].clientX - 40 // 减去40是为了让移动方块的中心点和手指的中心点对齐 值为球拍一半宽度
    state.mx = state.mx < 0 ? 0 : state.mx - 40
    state.mx = state.mx > boxWidth - moveBottomW ? boxWidth - moveBottomW : state.mx
};

// 绑定移动方块事件
onMounted(() => {
    document.addEventListener('keyup', bottomMove)
})

// 移动出移动方块事件
onUnmounted(() => {
    clearInterval(timer.value)
    document.removeEventListener('touchstart', handleTouchStart)
    document.removeEventListener('touchmove', handleTouchMove)
})

</script>


<style lang="scss" scoped>
.breakBrickContent {
    width: 100%;
    min-height: 100%;
    height: auto;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    padding: 5px;
    .btnBox {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: start;
        margin-bottom: 10px;
    }
    .score {
        color: var(--text-color);
        text-align: center;
        font-size: 25px
    }
    .bottomMove {
        width: 80px;
        height: 10px;
        background: var(--text-color);
        position: absolute;
        transition-duration: 100ms;
        transition-timing-function: ease-out;
    }
    .ball {
        width: 20px;
        height: 20px;
        background-color: rgb(0, 255, 94);
        border-radius: 50%;
        position: absolute;
    }
    .kuaiBox {
        display: flex;
        flex-wrap: wrap;
    }
    .kuai {
        width: 30px;
        height: 10px;
        background: var(--text-color);
        margin: 10px;
        transition-duration: 100ms;
        transition-timing-function: ease-in;
    }
    .str {
        text-align: center;
        font-size: 50px;
        color: red;
    }
    .box {
        justify-content: center;
        width: 100%;
        height: auto;
        min-height: 500px;
        margin: 0 auto;
        position: relative;
        border: 4px solid var(--text-color);
        overflow: hidden;
    }
    .picker {
        width: 50px;
        height: 50px;
    }
}
</style>